<script lang="ts" setup>
import type {
  FileConfigPageQo,
  FileConfigVo,
} from '#/system/file/fileConfig'
import {
  deleteFileConfigApi,
  getFileConfigPageListApi,
  setByIdConfigMasterApi,
} from '@/api/system/file/fileConfig'
import { Baseball, Edit } from '@element-plus/icons-vue'
import Details from './details.vue'

defineOptions({
  name: 'SystemFileConfig',
})

const columns: TableColumnType[] = [
  {
    type: 'selection',
    fixed: 'left',
    prop: 'selection',
  },
  {
    label: '名称',
    align: 'center',
    prop: 'name',
  },
  {
    label: '存储器',
    prop: 'storage',
    align: 'center',
    type: 'dict',
    dictType: 'file_config_storage',
  },
  {
    label: '主配置',
    prop: 'master',
    align: 'center',
    type: 'dict',
    dictType: 'file_master',
  },
  {
    label: '操作',
    prop: 'operation',
    align: 'center',
    type: 'slot',
    width: 200,
  },
]
const detailsRef = $ref<InstanceType<typeof Details>>()
let selectionList = $ref<string[]>([])

// 搜索
const [search, resetClk] = useResetState<FileConfigPageQo>(
  { pageNum: 1, pageSize: 10, total: 0 },
  () => {
    loadedTable()
  },
)
// 分页
const { loadedTable, tableData, loading, paginationChange } = useTablePaging(
  getFileConfigPageListApi,
  search,
)
// 打开对话框
async function openDialog(action: DialogAction, id?: string) {
  if (!detailsRef)
    return
  const { type } = await detailsRef?.showDialog({
    title: `${DialogActionMap[action]}文件配置`,
    action,
    model: {
      id,
    },
  })
  if (!type)
    return
  loadedTable()
}

// 删除
const [deleteBatch] = useDeleteBatch($$(selectionList), deleteFileConfigApi, () => {
  loadedTable()
  selectionList = []
})

// 设置主配置
function setConfigMaster(config: FileConfigVo) {
  ElMessageBox.confirm(
    `是否设置配置【${config.name}】为主配置?`,
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  )
    .then(async () => {
      await setByIdConfigMasterApi(config.id)
      Message({
        type: 'success',
        message: '设置成功',
      })
      loadedTable()
    })
}

onMounted(() => {
  loadedTable()
})
</script>

<template>
  <div
    un-flex="~ col"
    un-h="full"
  >
    <el-card
      un-m-b="2.5"
      body-style="height: 100%;"
      style="overflow: visible;"
    >
      <el-form
        :inline="true"
        :model="search"
        un-grid="~ cols-4"
        class="single-row-search-form"
      >
        <el-form-item label="名称" prop="name">
          <el-input v-model="search.name" placeholder="请输入文件配置名称" clearable />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <sy-dict
            v-model="search.status"
            dict-type="status"
            placeholder="请选择状态"
            type="select"
          />
        </el-form-item>
        <el-form-item>
          <sy-search-button @search="loadedTable" @reset="resetClk" />
        </el-form-item>
      </el-form>
    </el-card>
    <el-card
      un-flex="grow-1"
      body-style="height: 100%;"
    >
      <sy-table
        v-model:selection="selectionList"
        row-key="id"
        height="100%"
        border
        selection-chenge-use="id"
        add-btn-perms="file:config:add"
        delete-btn-perms="file:config:delete"
        :loading="loading"
        :columns="columns"
        :data="tableData"
        :paging="search"
        @paging-change="paginationChange"
        @refresh="loadedTable"
        @click-add="openDialog('add')"
        @click-del="deleteBatch"
      >
        <template #operation="{ row }">
          <el-button
            v-auth="'file:config:edit'"
            link
            type="primary"
            @click="setConfigMaster(row)"
          >
            <template #icon>
              <el-icon><Baseball /></el-icon>
            </template>
            主配置
          </el-button>
          <el-button
            v-auth="'file:config:edit'"
            link
            type="primary"
            @click="openDialog('edit', row.id)"
          >
            <template #icon>
              <el-icon><Edit /></el-icon>
            </template>
            编辑
          </el-button>
        </template>
      </sy-table>
    </el-card>
    <Details ref="detailsRef" />
  </div>
</template>

<style scoped>
:deep .sy-drawer__body {
  padding-top: 0 !important;
}
</style>
